<template>
	<view>
		<view class="display-a color_757575" style="padding: 30rpx 40rpx;">
			<picker mode="date" fields="month" :value="dateSta" :start="startDate" :end="endDate"
				@change="bindDateChange">
				<input type="text" class="sel-date" disabled placeholder="选择日期" v-model="dateSta"
					placeholder-class="placeholder" />
			</picker>
			<image class="img-13" src="../../static/13.png"></image>
			<view class="margin-left-auto">
				<picker mode="selector" @change="bindPickerChange2" :range="typeList" :range-key="'name'">
					<view class=" display-a">
						<view class="">筛选</view>
						<image class="img-12" src="../../static/12.png"></image>
					</view>
				</picker>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="list-public color_757575">
					<view class="name p-bo">{{item.activityName}}</view>
					<view class="display-a padding-top_30rpx">
						<view>
							活动类型： 
							<block v-if="item.types == 1">视频快推</block>
							<block v-if="item.types == 2">幸运大转盘</block>
							<block v-if="item.types == 3">幸运九宫格</block>
							<block v-if="item.types == 4">卡劵活动</block>
							<block v-if="item.types == 5">线下抽奖</block>
						</view>
						<view class="span">-{{item.money}}点</view>
					</view>
					<view style="margin: 30rpx 0 22rpx;">发布渠道：{{item.releaseChannel == 1 ? 'D音' : item.releaseChannel == 2 ? '视频号' : 'K手'}}</view>
					<view class="display-a-js">
						<view>{{item.effectiveTime}}</view>
						<!-- <view class="font-size_26rpx">查看详情 ></view> -->
					</view>
				</view>
			</block>
		</mescroll-body>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateSta: '',
				
				// 下拉配置项
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				
				typeList: [
					{id:1,name: '视频快推'},
					{id:2,name: '幸运大转盘'},
					{id:3,name: '幸运九宫格'},
					{id:4,name: '卡券活动'},
					{id:5,name: '线下抽奖'},
				],
				
				typeId: '', //活动类型 1.视频快推2.幸运大转盘3.幸运九宫格4.卡劵活动 5硬件活动
				
				list: [],
				
				windowHeight: '',
				
			}
		},
		
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		
		onLoad() {
			this.dateSta = this.getDate("end");
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},
		
		onShow() {
			
		},
		
		methods: {
			
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.selectPageRechargeRecordId,
					data: {
						activityType: this.typeId,
						staTime: this.dateSta,
						page: scroll.num,
						merchantId: uni.getStorageSync('merchantId'),
						limit: 10
					}
				});
				if (result.code == 2000) {
					this.mescroll.endByPage(result.data.list.length, result.data.count);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				}
			},
			
			//选择活动类型
			bindPickerChange2(e) {
				this.typeId = this.typeList[e.detail.value].id; 
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			},
			
			/*  日期选择  */
			bindDateChange(e) {
				this.dateSta = e.target.value;
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
				// this.getYear = e.target.value.toString().split("-")[0];
				// this.getMonth = e.target.value.toString().split("-")[1];
			},
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				// let day = date.getDate();
				if (type === 'start') {
					year = year - 100;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				// day = day > 9 ? day : '0' + day;
				// return `${year}-${month}-${day}`;
				return `${year}-${month}`;
			},
			
		}
	}
</script>

<style lang="scss">
	
	.span {
		color: #6568F6;
		font-weight: bold;
		margin-left: auto;
	}
	
	.name {
		padding-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}
	
	.img-12 {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}
	
	.sel-date {
		width: 130rpx;
		font-size: 32rpx;
	}
	
	.img-13 {
		width: 16rpx;
		height: 10rpx;
		margin-left: 16rpx;
	}
	
</style>
